<template>
  <div class="import-export-dialog">
    <!-- 导入模式 -->
    <div v-if="mode === 'import'" class="import-dialog">
      <el-form :model="importForm" label-width="100px">
        <el-form-item label="文件格式">
          <el-radio-group v-model="importForm.format">
            <el-radio label="json">JSON</el-radio>
            <el-radio label="xlsx">Excel</el-radio>
            <el-radio label="yaml">YAML</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="导入选项">
          <div class="import-options">
            <el-checkbox v-model="importForm.merge">合并现有配置</el-checkbox>
            <el-checkbox v-model="importForm.validate">导入前验证</el-checkbox>
            <el-checkbox v-model="importForm.backup">创建备份</el-checkbox>
          </div>
        </el-form-item>

        <el-form-item label="选择文件">
          <el-upload
            ref="uploadRef"
            :before-upload="handleBeforeUpload"
            :on-change="handleFileChange"
            :auto-upload="false"
            :show-file-list="true"
            :limit="1"
            drag
          >
            <el-icon size="40"><UploadFilled /></el-icon>
            <div class="upload-text">
              点击或拖拽文件到此处上传
            </div>
          </el-upload>
        </el-form-item>
      </el-form>

      <div class="dialog-actions">
        <el-button @click="$emit('close')">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleImport"
          :loading="loading"
          :disabled="!selectedFile"
        >
          导入
        </el-button>
      </div>
    </div>

    <!-- 导出模式 -->
    <div v-if="mode === 'export'" class="export-dialog">
      <el-form :model="exportForm" label-width="100px">
        <el-form-item label="导出格式">
          <el-radio-group v-model="exportForm.format">
            <el-radio label="json">JSON</el-radio>
            <el-radio label="xlsx">Excel</el-radio>
            <el-radio label="yaml">YAML</el-radio>
            <el-radio label="typescript">TypeScript</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="导出选项">
          <div class="export-options">
            <el-checkbox 
              v-model="exportForm.minify"
              :disabled="exportForm.format !== 'json'"
            >
              压缩格式
            </el-checkbox>
            <el-checkbox 
              v-model="exportForm.includeComments"
              :disabled="!['yaml', 'typescript'].includes(exportForm.format)"
            >
              包含注释
            </el-checkbox>
          </div>
        </el-form-item>
      </el-form>

      <div class="dialog-actions">
        <el-button @click="$emit('close')">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleExport"
          :loading="loading"
        >
          导出
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'

interface Props {
  mode: 'import' | 'export'
}

interface Emits {
  (e: 'success', data?: any): void
  (e: 'close'): void
}

defineProps<Props>()
const emit = defineEmits<Emits>()

// 响应式数据
const loading = ref(false)
const selectedFile = ref<File | null>(null)
const uploadRef = ref()

const importForm = ref({
  format: 'json',
  merge: false,
  validate: true,
  backup: true
})

const exportForm = ref({
  format: 'json',
  minify: false,
  includeComments: true
})

// 方法
const handleFileChange = (file: any) => {
  selectedFile.value = file.raw
}

const handleBeforeUpload = () => {
  return false // 阻止自动上传
}

const handleImport = async () => {
  if (!selectedFile.value) return

  loading.value = true
  try {
    // 模拟导入逻辑
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    emit('success', {
      type: 'import',
      file: selectedFile.value,
      options: importForm.value
    })
  } catch (error) {
    ElMessage.error('导入失败')
  } finally {
    loading.value = false
  }
}

const handleExport = async () => {
  loading.value = true
  try {
    // 模拟导出逻辑
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    emit('success', {
      type: 'export',
      options: exportForm.value
    })
  } catch (error) {
    ElMessage.error('导出失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.import-export-dialog {
  padding: 16px 0;
}

.import-options, .export-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload-text {
  margin-top: 8px;
  color: var(--config-editor-text-secondary);
  font-size: 14px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--config-editor-border);
}
</style>
